<template>
  <div class="content">
    <div class="left-section">
      <!-- 设备情况 -->
      <Equipment />
      <!-- 设备列表 -->
      <DeviceList />
        <!-- 物种统计 -->
        <SpeciesStatistics />
    </div>
    <div class="center-section">
      <Center @device-click="handleDeviceClick" ref="center" />
    </div>
    <div class="right-section">

        <!-- 观测统计 -->
        <ObservationStatistics />
      <!-- 物种观测成果 -->
      <SpeciesObservationResult @species-selected="handleSpeciesSelected" ref="speciesResult" />
      <!-- 物种观测详情 -->
      <SpeciesObservationDetail ref="speciesDetail" />
    </div>
  </div>
</template>

<script>
import Equipment from '@/components/SpecisesObservation/Equipment.vue'
import DeviceList from '@/components/SpecisesObservation/DeviceList.vue'
import ObservationStatistics from '@/components/SpecisesObservation/ObservationStatistics.vue'
import SpeciesStatistics from '@/components/SpecisesObservation/SpeciesStatistics.vue'
import SpeciesObservationResult from '@/components/SpecisesObservation/SpeciesObservationResult.vue'
import SpeciesObservationDetail from '@/components/SpecisesObservation/SpeciesObservationDetail.vue'
import Center from '@/components/SpecisesObservation/Center.vue'
import {EventBus} from "../utils/event-bus";
import router from "../router";
export default {
  components: {
    Equipment,
    DeviceList,
    ObservationStatistics,
    SpeciesStatistics,
    SpeciesObservationResult,
    SpeciesObservationDetail,
    Center
  },
  created() {
    // EventBus.$on('menu-device-type', (message) => {
    //   this.addMapMarkers(message);
    //
    //     setTimeout(() => {
    //         EventBus.$emit('set-device-type', message);
    //     }, 2000);
    // })
  },
  data() {
    return {
      devices: [],
      deviceList: [
        { id: 'infrared', name: '红外',total: 0, deviceData: '',type: '' },
        { id: 'voice', name: '声纹',total: 0, deviceData: '',type: '' },
        { id: 'video', name: '视频',total: 0, deviceData: '',type: '' },
        { id: 'insect', name: '虫情',total: 0, deviceData: '',type: '' }
      ],
      position:{lon:121.444162, lat:31.147243,zoom:16.35}
    }
  },
  mounted() {
    EventBus.$emit('set-position', this.position);
    EventBus.$emit('map-show', true);

    // EventBus.$emit('select-menu', this.$router.query.deviceType);

    // this.$api.device.getDeviceList().then(res => {
    //   this.devices = res
    //   this.deviceList.forEach((device, index) => {
    //     res.forEach(item => {
    //       if (device.name === item.name) {
    //         this.deviceList[index].total = item.status.normal + item.status.offline + item.status.error
    //         this.deviceList[index].deviceData = item
    //         this.deviceList[index].type = item.type
    //       }else{
    //
    //       }
    //     })
    //   })
    //   this.$emit('devices-loaded', this.devices);
    //   // 然后发送点击事件
    //   this.$emit('device-click', deviceData);
    //   // 在地图上添加标注
    //   this.addMapMarkers(deviceData);
    // });
  },
  methods: {
    handleSpeciesSelected(speciesData) {
      // 将选中的物种数据传递给SpeciesObservationDetail组件
      this.$refs.speciesDetail.updateSpeciesData(speciesData);
    },
    handleDeviceClick(deviceData) {
      // 将选中的设备数据传递给Center组件
      this.$refs.speciesResult.updatespeciesResultData(deviceData);
    },
    addMapMarkers(device) {
      // 根据设备类型获取对应的标注数据
      let apiUrl = '';
      let deviceType = '';

      switch (device) {
        case "hongwai":
          apiUrl = "/cockpitapi/home/getHezeDeviceList";
          deviceType = "hongwai";
          break;
        case "shipin":
          apiUrl = "/cockpitapi/home/getIcvideoDeviceList";
          deviceType = "shipin";
          break;
        case "shengwen":
          apiUrl = "/cockpitapi/home/getSjkjDeviceList";
          deviceType = "shengwen";
          break;
        case "chongqing":
          apiUrl = "/cockpitapi/home/getWdtecDeviceList";
          deviceType = "chongqing";
          break;
        default:
          return;
      }
      // EventBus.$emit('set-device-type', deviceType);
      // 调用API获取设备位置数据
      this.$api.device.getDeviceLocation(apiUrl).then(response => {
        if (response) {
          // 通过 Vuex 更新标注数据
          this.$store.dispatch('map/updateMarkers', {
            markers: response.map(item => ({
              ...item,
              icon: this.getMarkerIcon(deviceType, item.localStatus)
            })),
            deviceType: device.name
          });
        }
      }).catch(error => {
        console.error('Error fetching device locations:', error);
      });
    },
    getMarkerIcon(deviceType, status) {
      const statusMap = {
        1: 'normal',
        2: 'offline',
        3: 'abnormal'
      };
      const statusSuffix = statusMap[status] || 'normal';
      return require(`@/assets/img/${deviceType}-${statusSuffix}.png`);
    }
  }
}
</script>
<style scoped>
.ledgend-img{
  position: absolute;
  bottom: 72px;
  right: 37px;
}
</style>

